<template>
    <div>
        <el-row>
            <el-col :span="12" align="left">
                <span>月份范围：</span>
                <el-date-picker
                    v-model="month"
                    style="width:50%"
                    type="monthrange"
                    value-format="yyyy-MM"
                    clearable
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份">
                </el-date-picker>
            </el-col>     
        </el-row>
        <el-row>
            <el-col :span="4" align="left">
                <el-button type="success" @click="exports" :disabled="loading" :loading="loading">导出数据</el-button>
            </el-col>
            <!-- <el-col :span="4" align="left">
                <el-button type="primary" @click="search">查询</el-button>
            </el-col>
            <el-col :span="16"></el-col>
            <el-col :span="4" align="right">
                <el-button type="success" @click="exports" :loading="loading">导出数据</el-button>
            </el-col> -->
        </el-row> 
        <!-- <el-table
              :data="table"
              v-loading="tableLoading"
              border
              stripe 
              size="small"
              height="500"
              style="width: 100%">
            <el-table-column
                label="项目"
                prop="productName"
                align="center"
                width="120">
            </el-table-column>
        </el-table>
        <el-pagination
            background
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="totalCount"
            style="margin:50px;">
        </el-pagination>
        <div style="margin:30px 0;" class="fw">共{{Math.ceil(totalCount/pageSize)}}页,{{totalCount}}条信息</div> -->
    </div>
</template>

<script>
import { setInterval, setTimeout } from 'timers';
var searchInfo={
    startMonth:"",
    endMonth:"",
};
var startMonth="";
var endMonth="";
export default {
    data(){
        return{
            month:"",
            loading:false,
            tableLoading:false,
            table:[],
            currentPage: 1,
            pageSize: 20,
            totalCount: 0,
        }
    },
    methods:{
        search(){
            this.requestInfo();
        },
        requestInfo(){
            if(this.month){
                startMonth=this.month[0];
                endMonth=this.month[1];
            }else{
                startMonth="";
                endMonth="";
            }
            this.tableLoading=true;
            this.postRequest("/api/report/totalPcfee/query",{
                startMonth:startMonth,
                endMonth:endMonth,
            }).then(resp =>{
                console.log(resp)
                this.tableLoading=false;
                if(resp && resp.status==200){
                    this.table=resp.data.obj;
                    this.totalCount = resp.data.obj.length;
                    searchInfo={
                        startMonth:startMonth,
                        endMonth:endMonth,
                    }
                }
            })
        },
        //列表当前页改变
        currentChange: function(currentChange) {
            this.currentPage = currentChange;
            this.requestInfo()
        },
        exports(){
            if(!this.month){
                this.common.showToast('info','请填写月份范围')
            }else{
                this.loading=true;
                startMonth=this.month[0];
                endMonth=this.month[1];
                var address=`/api/report/totalPcfee/export?startMonth=${startMonth}&&endMonth=${endMonth}`
                this.common.downloadFile(address);
                setTimeout(()=>{
                    this.loading=false;
                },3000)
            }
            
        }
    }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  height: 50px;
  line-height: 50px;
}
.el-col {
  height: 50px;
  line-height: 50px;
}
.el-input,.el-input__inner{
    width: 70%;
}
.el-select{
    width: 50%;
}
</style>
